<template>
  <div class="box">
    
    <ul>
      <li style="height: 250px;" v-if="!userComment.length>0">
        <el-empty style="height: 50px !important; margin-top: 60px;"></el-empty>
      </li>
      <li v-for="item in userComment" :key="item.commentId">
        <div class="item">
          <div @click="toDetail(item.blogId,item.userid)" class="hhh">
            <div class="item-top">
              <div class="title">文章题目--{{ item.title }}</div>
              <div class="comment-time">{{ item.time }}</div>
            </div>
            <div class="item-center">
              <div class="content">文章内容--{{ item.content }}</div>
            </div>
          </div>
          <div class="comment-detail"><div class="wode" style="margin-left: 5px;">我的评论:</div>
          <div class="item-bottom">
              <div style="font-size: 14px; margin-left: 2em;margin-bottom: 10px;margin-top: 5px;" v-html="analyzeEmoji(item.myComment)">
              </div>
              <!-- <div style="font-size: 14px; margin-left: 2em;margin-bottom: 10px;">{{ item.myComment }}</div> -->
              <div class="del-btn"><el-button type="text" @click="deleteComment(item.commentId)">删除</el-button></div>
            </div>
          </div>
        </div>
      </li>
    </ul>
    <div class="block">
      <el-pagination
        layout="prev, pager, next"
        :current-page="pageInfo.pageNum"
        @current-change="handleCurrentChange"
        :page-size="pageInfo.pageSize"
        :page-count="pageCount"
        :hide-on-single-page="true"
        >
      </el-pagination>
    </div>
  </div>
</template>

<script>
import {GetCommentByUserId,DeleteCommentById} from '../../../request/api'
import { mapState,mapMutations ,mapActions} from 'vuex'
export default {
  data(){
    return{
      dataList:[],
      OwOlist: [
        //表情包和表情路径
        { title: "微笑", url: "weixiao.gif" },
        { title: "嘻嘻", url: "xixi.gif" },
        { title: "哈哈", url: "haha.gif" },
        { title: "可爱", url: "keai.gif" },
        { title: "可怜", url: "kelian.gif" },
        { title: "挖鼻", url: "wabi.gif" },
        { title: "吃惊", url: "chijing.gif" },
        { title: "害羞", url: "haixiu.gif" },
        { title: "挤眼", url: "jiyan.gif" },
        { title: "闭嘴", url: "bizui.gif" },
        { title: "鄙视", url: "bishi.gif" },
        { title: "爱你", url: "aini.gif" },
        { title: "泪", url: "lei.gif" },
        { title: "偷笑", url: "touxiao.gif" },
        { title: "亲亲", url: "qinqin.gif" },
        { title: "生病", url: "shengbing.gif" },
        { title: "太开心", url: "taikaixin.gif" },
        { title: "白眼", url: "baiyan.gif" },
        { title: "右哼哼", url: "youhengheng.gif" },
        { title: "左哼哼", url: "zuohengheng.gif" },
        { title: "嘘", url: "xu.gif" },
        { title: "衰", url: "shuai.gif" },
        { title: "吐", url: "tu.gif" },
        { title: "哈欠", url: "haqian.gif" },
        { title: "抱抱", url: "baobao.gif" },
        { title: "怒", url: "nu.gif" },
        { title: "疑问", url: "yiwen.gif" },
        { title: "馋嘴", url: "chanzui.gif" },
        { title: "拜拜", url: "baibai.gif" },
        { title: "思考", url: "sikao.gif" },
        { title: "汗", url: "han.gif" },
        { title: "困", url: "kun.gif" },
        { title: "睡", url: "shui.gif" },
        { title: "钱", url: "qian.gif" },
        { title: "失望", url: "shiwang.gif" },
        { title: "酷", url: "ku.gif" },
        { title: "色", url: "se.gif" },
        { title: "哼", url: "heng.gif" },
        { title: "鼓掌", url: "guzhang.gif" },
        { title: "晕", url: "yun.gif" },
        { title: "悲伤", url: "beishang.gif" },
        { title: "抓狂", url: "zhuakuang.gif" },
        { title: "黑线", url: "heixian.gif" },
        { title: "阴险", url: "yinxian.gif" },
        { title: "怒骂", url: "numa.gif" },
        { title: "互粉", url: "hufen.gif" },
        { title: "书呆子", url: "shudaizi.gif" },
        { title: "愤怒", url: "fennu.gif" },
        { title: "感冒", url: "ganmao.gif" },
        { title: "心", url: "xin.gif" },
        { title: "伤心", url: "shangxin.gif" }, 
        { title: "猪", url: "zhu.gif" },
        { title: "熊猫", url: "xiongmao.gif" },
        { title: "兔子", url: "tuzi.gif" },
        { title: "喔克", url: "ok.gif" },
        { title: "耶", url: "ye.gif" },
        { title: "棒棒", url: "good.gif" },
        { title: "不", url: "no.gif" },
        { title: "赞", url: "zan.gif" },
        { title: "来", url: "lai.gif" },
        { title: "弱", url: "ruo.gif" },
        { title: "草泥马", url: "caonima.gif" },
        { title: "神马", url: "shenma.gif" },
        { title: "囧", url: "jiong.gif" },
        { title: "浮云", url: "fuyun.gif" },
        { title: "给力", url: "geili.gif" },
        { title: "围观", url: "weiguan.gif" },
        { title: "威武", url: "weiwu.gif" },
        { title: "话筒", url: "huatong.gif" },
        { title: "蜡烛", url: "lazhu.gif" },
        { title: "蛋糕", url: "dangao.gif" },
        { title: "发红包", url: "fahongbao.gif" },
      ],
      params:{
        pageNum:1,
        commentid:null
      },
      pageInfo:{},
      pageCount:null
    }
  },
  computed:{
    ...mapState({
        userComment:state=>state.comment.userComment
    })
  },
  async created(){
    // 初始页面数据获取
    let res = await GetCommentByUserId(this.params)
    // this.dataList = 
    this.setUserComment(res.data.data.list)
    this.pageInfo = res.data.data
    this.params.pageNum = this.pageInfo.pageNum
    this.pageCount = Math.ceil(this.pageInfo.total/5)
    // console.log("comment ",res.data)
  },
  methods:{
    ...mapMutations({
      setUserComment:"comment/setUserComment",
    }),
    ...mapActions({
      asyncChangeIsShowToast:'toastStatus/asyncChangeIsShowToast'
    }),
    analyzeEmoji: function (cont) {
      //编译表情替换成图片展示出来
      var pattern1 = /\[[\u4e00-\u9fa5]+\]/g;
      var pattern2 = /\[[\u4e00-\u9fa5]+\]/;
      var content = cont.match(pattern1);
      var str = cont;
      if (content) {
        for (var i = 0; i < content.length; i++) {
          for (var j = 0; j < this.OwOlist.length; j++) {
            if ("[" + this.OwOlist[j].title + "]" == content[i]) {
              var src = this.OwOlist[j].url;
              break;
            }
          }
          var s = require("../../../components/base/img/face/" + src);
          var imoj = "<img src='" + s + "'/>";

          str = str.replace(pattern2, imoj);
        }
      }
      return str;
    },
    toDetail(blogid,userid){
      this.$router.push({path:'/home/detail',query:{
        blogid,
        userid
      }},)
    },
    async deleteComment(commentid){
      // console.log("删除",commentid)
      // 删除comment的操作
      this.params.commentid = commentid
      let res = await DeleteCommentById(this.params)
      // console.log("dee",res)
      if(res.data.state == 200){
        this.asyncChangeIsShowToast({
          type:'success',
          msg:'删除成功'
        })
        // 刷新数据
        // this.refreshData()
        let res2 = await GetCommentByUserId(this.params)
        // 如果查询结果为空
        if(res2.data.data.list.length == 0){
          // 查询前一页的
          this.params.pageNum--
          if(this.params.pageNum <= 0){
            this.params.pageNum = 1
          }
          let res3 = await GetCommentByUserId(this.params)
          this.setUserComment(res3.data.data.list)
          this.pageInfo = res3.data.data
          this.pageCount = Math.ceil(this.pageInfo.total/5)
          return
        }
        this.setUserComment(res2.data.data.list)
        this.pageInfo = res2.data.data
        this.pageCount = Math.ceil(this.pageInfo.total/5)
      }else{
        console.log("删除失败")
      }
    },
    async handleCurrentChange(pageNum){
        this.params.pageNum = pageNum
        let res = await GetCommentByUserId(this.params)
        this.setUserComment(res.data.data.list)
        this.pageInfo = res.data.data
        // this.params.pageNum = pageNum
    }
    
  }
}
</script>

<style scoped>
.box{
  padding: 10px;
}
ul{
  list-style: none;
  display: flex;
  flex-direction: column;
}
.item{
  width: 100%;
  border: 1px solid #aaa8a8;
  margin-bottom: 10px;
  border-radius: 4px;
  background-color: rgb(245,247,250);
}
.item:hover{
  box-shadow: 0 2px 4px rgba(0, 0, 0, .12);
}
.item-top{
  display: flex;
  flex-direction: row;
  align-items: center;
  position: relative;
  padding: 5px;
}
.comment-time{
  position: absolute;
  right: 10px;
  color: #999;
}
.content{
    width: 350px;
    height: 20px;
    margin-left: 20px;
    font-size: 12px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.item-bottom{
  display: flex;
  flex-direction: row;
  text-align: center;
  position: relative;
}
.del-btn{
  position: absolute;
  bottom: 5px;
  right: 10px;
}

.wode{
  font-size: 16px;
}
.hhh{
  border-radius: 4px;
}
.hhh:hover{
  cursor: pointer;
  background-color: rgb(236,245,255);
}
.block{
  text-align: center;
  margin: 0 auto;
}
</style>
